<!--  -->
<template>
  <div class="page-container">
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" />
    <table-index :table="table" :rowKey="`id`" @loadData="loadData">
      <template #table-summary>
        <div class="table-info">
          <div class="table-info-item">
            运维总支出：<text>{{ unitVal(staticObj.operationExpenditure, '元') }}</text></div
          >
          <div class="table-info-item">
            账单总数：<text>{{ staticObj.billSum || 0 }} </text></div
          >
          <div class="table-info-item">
            应付金额：<text>{{ unitVal(staticObj.amountPayable, '元') }} </text></div
          >
          <div class="table-info-item">
            实付金额：<text>{{ unitVal(staticObj.actuallyPaid, '元') }} </text></div
          >
        </div>
      </template>
      <template #carmsg="{ record }">
        <div class="car-msg">
          <div class="car-msg-left">
            <div class="col-text col-lic"> {{ record.carLicenseNo || '-' }} </div>
            <div class="col-text"> {{ record.carModelName }} </div>
          </div>
        </div>
      </template>
      <template #bindOrder="{ record }">
        <div
          ><span @click="() => onLink(record)" v-if="record.orderCode" class="order-line">{{ record.orderCode }}</span>
          <span v-else>-</span>
        </div>
        <div>交车人：{{ record.staffName || '-' }}</div>
      </template>
      <template #undertaker="{ record }"> {{ record.undertaker }}{{ record.undertakerTel }} </template>
      <template #time="{ record }">
        {{ record.startTime }}
        <div>-</div>
        {{ record.endTime }}
      </template>
    </table-index>
  </div>
</template>

<script setup name="MaintenanceBillList">
  import { unitVal } from '@/utils'
  import { reactive, computed, onMounted, ref } from 'vue'
  import { getOperationsBillPageList, getOperationsBillStatistics, exportOperationsBillExcel } from '@/api/finance/costConfirm.js'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { useExport } from '@/hooks/list'
  import { cloneDeep } from 'lodash-es'
  import useNavigate from '@/hooks/useNavigate'
  const { navigateTo } = useNavigate()
  // dateTime Attrs
  const feeList = ref([
    {
      value: 1,
      label: '保养单',
    },
    {
      value: 2,
      label: '维修单',
    },
    {
      value: 3,
      label: '年检单',
    },
  ])
  const searchList = computed(() => {
    return [
      {
        label: '车牌号',
        prop: 'licenseNo',
        type: 'a-input',
      },
      {
        label: '运维类型',
        prop: 'feeCategoryList',
        type: 'a-select',
        multiple: true,
        options: feeList.value,
      },
      {
        label: '账单门店',
        prop: 'siteIdList',
        type: 'remote-select',
        attrs: {
          multiple: true,
          type: 'multiple_site_listBystaff',
        },
      },
      {
        label: '业务单号',
        prop: 'businesCode',
        type: 'a-input',
      },
      {
        label: '供应商',
        prop: 'supplierIdList',
        type: 'remote-select',
        attrs: {
          multiple: true,
          type: 'supplier_list_multiple',
        },
      },
      {
        label: '负责人',
        prop: 'undertakerIdsList',
        type: 'remote-select',
        attrs: {
          multiple: true,
          type: 'store_staff_list_multiple',
        },
      },
      {
        label: '运维周期',
        prop: 'startTimeRange',
        type: 'i-range-picker',
        attrs: {
          showTime: true,
          timePickerProps: {
            defaultValue: ['00:00:00', '23:59:59'],
          },
        },
        change: (value = []) => {
          queryParam.startTime = value[0]
          queryParam.endTime = value[1]
        },
      },
    ]
  })
  const onLink = (record) => {
    if (record.orderType == 2) {
      navigateTo(`/short-order/detail/${record.orderId}`, `${record.orderCode}-短租详情`)
    } else if (record.orderType == 3) {
      navigateTo(`/long-order/detail/${record.orderId}`, `${record.orderCode}-长租详情`)
    }
  }
  const defaultQueryParam = {
    // 运维周期
    startTimeRange: [],
  }
  // 定义 queryParam
  const queryParam = reactive({
    ...cloneDeep(defaultQueryParam),
  })
  // 待处理 - table 配置
  const table = useTable({
    tableHeight: '60vh',
    columns: [
      { title: '运维类型', dataIndex: 'operationStatusName' },
      { title: '业务单号', dataIndex: 'businesCode' },
      { title: '车辆信息', dataIndex: 'aa', width: 320, slotName: 'carmsg' },
      { title: '关联单号', dataIndex: 'order', slotName: 'bindOrder', width: 220 },
      { title: '供应商', dataIndex: 'supplierName', width: 220 },
      { title: '负责人', dataIndex: 'exportDate', width: 220, slotName: 'undertaker' },
      { title: '运维周期', dataIndex: 'warningTime', width: 180, slotName: 'time' },
      { title: '账单门店', dataIndex: 'siteName' },
      { title: '费用金额', unit: '元', dataIndex: 'totalAmountSum' },
      { title: '待结金额', unit: '元', dataIndex: 'outstandingAmountSum' },
      { title: '当前状态', dataIndex: 'createNodeName' },
    ],
    operates: [
      {
        label: '详情',
        permission: 'svms:finance:bill:maintenance.detail',
        method: (record) => {
          navigateTo('/maintenance-info/detail/' + record.businesId + '?feeCategory=' + record.feeCategory, `账单-${record.businesCode}`)
        },
      },
    ],
    buttons: [
      {
        mode: 'import',
        label: '导出',
        permission: 'svms:finance:bill:maintenance.export',
        method: () => handleExport(),
      },
    ],
  })
  // 导出事件
  const handleExport = () => {
    useExport(exportOperationsBillExcel, queryParam)
  }
  // 列表接口调用
  // const loadData = useFetchTableDataApi(table, queryParam, getOperationsBillPageList)
  const loadData = (page) => {
    const fn = useFetchTableDataApi(table, queryParam, getOperationsBillPageList)
    fn(page).then(() => {
      getStatic()
    })
  }
  const staticObj = ref({})
  const getStatic = async () => {
    var params = queryParam
    const { result } = await getOperationsBillStatistics(params)
    staticObj.value = result
  }
  onMounted(() => {
    loadData()
  })
</script>

<style lang="less" scoped>
  .table-info-item {
    display: inline-block;
    margin-right: 20px;
    text {
      color: #1890ff;
    }
  }

  .num {
    color: #1890ff;
  }
  .order-line {
    color: #165dff;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
  }
</style>
